<template>
  <el-menu default-active="2-1" class="el-menu-vertical-demo dark-mode" :collapse="isCollapse" @open="handleOpen"
    @close="handleClose">
    <el-sub-menu index="1" popper-class="dark-mode">
      <template #title>
        <el-icon>
          <apple />
        </el-icon>
        <span>系统管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="1-1">系统管理1</el-menu-item>
        <el-menu-item index="1-2">系统管理2</el-menu-item>
        <el-menu-item index="1-3">系统管理3</el-menu-item>
      </el-menu-item-group>
      <el-sub-menu index="1-4">
        <template #title><span>item four</span></template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-sub-menu index="2" popper-class="dark-mode">
      <template #title>
        <el-icon>
          <user />
        </el-icon>
        <span>用户管理</span>
      </template>
      <el-menu-item-group>
        <router-link to="/user">
          <el-menu-item index="2-1">
            用户管理1
          </el-menu-item>
        </router-link>
        <router-link to="/order">
          <el-menu-item index="2-2">
            用户管理2
          </el-menu-item>
        </router-link>
        <el-menu-item index="2-3">用户管理3</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-menu-item index="3">
      <el-icon><icon-menu /></el-icon>
      <template #title>一级菜单3</template>
    </el-menu-item>
    <el-menu-item index="4" disabled>
      <el-icon>
        <document />
      </el-icon>
      <template #title>禁用菜单4</template>
    </el-menu-item>
  </el-menu>
</template>

<script lang="js" setup>
import { ref } from 'vue'
import {
  Apple,
  User,
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

const isCollapse = ref(false)
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 100%;
  height: 100vh;
}

a {
  text-decoration: none;
}
</style>
